<template>
  <Card>
    <p slot="title" class="card-title">
      <Icon type="person-stalker"></Icon>
      <span>查询</span>
    </p>
    <template>
      <Row>
        <Col span="24">
        <Form ref="search_info" class="search-info" :label-width="100" :model="search_info"  style="flex: 0 0 100%" inline>
          <Col span="8">
          <Form-item label="客户姓名" prop="trueOrFalse">
            <Input v-model="dataInfo.name" placeholder="" style="width: 200px"/>
          </Form-item>
          </Col>

          <!--<Col span="8">-->
          <!--<Form-item label="交易状态" prop="state" style="width: 200px">-->
            <!--<Select v-model="dataInfo.signState"  style="width: 200px">-->
              <!--<Option value="1">交易成功</Option>-->
              <!--<Option value="2">交易失败</Option>-->
            <!--</Select>-->
          <!--</Form-item>-->
          <!--</Col>-->

          <Col span="8">
          <Form-item label="时间筛选" prop="请选择时间" style="width: 200px">
            <DatePicker type="daterange" :options="options2"  v-model="optionsData"confirm placement="bottom-end" @on-ok="handleOk(optionsData)" placeholder="请选择时间" style="width: 200px"></DatePicker>

          </Form-item>
          </Col>

          <Col span="8">
          <Form-item label="状态" prop="productCode" style="width: 200px">
            <Select v-model="dataInfo.state"  style="width: 200px">
              <Option value="1">交易失败</Option>
              <Option value="2">交易成功</Option>
            </Select>
          </Form-item>
          </Col>
        </Form>
        </Col>
        <div style="margin-top: 2rem;text-align: center">
          <Button type="primary" icon="ios-search" @click="doGetDetail" style="margin-right: 8px">搜索</Button>
          <!--<Button type="primary"  @click="addWhite" style="margin-right: 8px">添加</Button>-->
        </div>
      </Row>

      <div style="margin-top: 2rem;text-align: center">
        <Table ref="table"  class="margin-bottom-10" :columns="columns"
               :border="setting.showBorder" :data="data.content" style="margin-top: 1.5rem">
        </Table>
        <Page :total="data.totalElements" class="tr" @on-change="pageChange":current.sync="dataFilter.current" :page-size="data.size"
              @on-page-size-change="pageSizeChange" show-elevator show-sizer>
        </Page>
      </div>

    </template>

  </Card>
</template>

<script>
    import {post,get} from '../../../libs/axios-cfg';
    import moment from 'moment'
    export default {
        name: "index",
        data () {
            return {
                optionsData: '',
                search_info: {
                    state: '',
                    name: '',
                    status: '',
                    productCode: ''
                },
                dataFilter: {
                    page: 0,
                    size: 10
                },
                formInfo: {
                    phone: '',
                    amount: '',
                    uname:"",
                    uid :"",
                    ucard:"",
                    bankName:"",
                    createTime: moment(new Date()).format('YYYY年MM月DD日 HH:mm:ss'),                    // signTime:"",
                    //ustate: '',
                    property:'',
                    mid: "",
                    signState:'1'
                },
                setting: {
                    loading: true,
                    showBorder: true
                },
                formInfoup: {
                    uname:"",
                    uid :"",
                    phone: '',
                    amount: '',
                    ucard:"",
                    bankName:"",
                    createTime:"",
                    // signTime:"",
                    // ustate: '',
                    property:'',
                    mid: "",
                    signState:'1'
                },
                dataInfo: {
                    endTime: '',
                    startTime: '',
                    signState: '',
                    name: '',
                    state: '0'
                },
                options2: {
                    shortcuts: [
                        {
                            text: '本周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            },
                            onClick: (picker) => {
                                console.log("picker"+picker)
                                debugger
                            }
                        },
                        {
                            text: '本月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            },
                            onClick: (picker) => {
                                console.log("picker"+picker)
                                debugger
                            }
                        },
                        {
                            text: '最近3月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            },
                            onClick: (picker) => {
                                console.log("picker"+picker)
                                debugger
                            }
                        }
                    ]
                },
                columns: [
                    {
                        title: '姓名',
                        align: 'center',
                        key: 'uname'
                    },
                    {
                        title: '销售人',
                        align: 'center',
                        key: 'salesman'
                    },
                    {
                        title: '金额',
                        align: 'center',
                        key: 'amount'
                    },
                    {
                        title: '手机号',
                        align: 'center',
                        key: 'uphone'
                    },
                    {
                        title: '流水号',
                        align: 'center',
                        key: 'wid'
                    },
                    {
                        title: '描述',
                        width: 350,
                        key: 'description'
                    },
                    {
                        title: '创建日期',
                        width: 200,
                        key: 'signState',
                        render:(h,params)=>{
                            return h('span',moment(params.row.signTime).format('YYYY年MM月DD日 HH:mm:ss'))
                        },

                    },
                    {
                        title: '状态',
                        key: 'status',
                        render:(h,params)=>{
                            return h('span',
                                {
                                    style: {color: params.row.wstate == 1 ? 'red' : 'green'
                                    }
                                }, params.row.wstate == 1 ? '失败' : '成功')
                        },

                    },

                ],
                data: []
            }
        },
        mounted () {
            this.getWriteDataList()
        },
        methods : {

            async getWriteDataList () {
                try {
                    let res = await post ('/withhold/query/list',{
                        endTime: this.dataInfo.endTime,
                        page: this.dataFilter.page,
                        size: this.dataFilter.size,
                        name: this.dataInfo.name,
                        state: this.dataInfo.state,
                        startTime: this.dataInfo.startTime
                    })
                    this.data = res.data
                }catch (e){
                    this.$throw(e)
                }
            },

            handleOk (picker) {
                this.dataInfo.startTime = moment(picker[0]).format('YYYY-MM-DD')
                this.dataInfo.endTime = moment(picker[1]).format('YYYY-MM-DD')

            },
            doGetDetail () {
                this.getWriteDataList()
            },
            pageChange(p) {
                this.dataFilter.page = p-1;
                this.getWriteDataList();
            },
            pageSizeChange(p) {
                this.dataFilter.size = p;
                this.getWriteDataList();
            },
        }
    }
</script>

<style scoped>

</style>
